<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <head>
    
        <style>
  
       
    .bg {
        background-color: black;
       
        margin: 0 auto;
    }

    body{
    background-image: url(1.jpg.png);

    background-size: cover;}
    
    h2 {
        color: white;
        display: inline-block;
        position: absolute;
        left: 500px;
        top: 500px;
        font-size: 100PX;
    }
    .ma h3 {
        color: white;
        position: absolute;
        left: -100px;
    }
    h5 {
        color:white;
        }
    
    .me h4 {
        position: relative;
        left: 500px;
        top: 610px;
    }
    .me p {
        color: white;
        display: inline-block;
        position: relative;
        left: 600px;
        top: 600px;
    }
    .zi p {
        color: white;
    }
    .zi h3{
        color: white;
    }
    .me a {
        color: rgb(240, 226, 226);
        position: relative;
        font-size: 24px;
    }
    
        
    
  
    
    .r {
        position: relative;
        top: 500px;
        left: 10px;
    }
    .w {
        position: relative;
        top: 700px;
        left: 100px;
    }
    .s {
        position: absolute;
        top: 1140px;
        right: 180px;
    }
    .zi {
        width: 500px;
        height: 500px;
        
        background-color: #656075;
        text-align: center;
        position: absolute;
        top: 1250px;
        right: 550px;
    }
    
    .err {
        position: relative;
        left: 1120px;
        bottom: 155px;
    }
    .errr {
        position: relative;
        left: 75px;
        bottom: 2px;
    }
    .errrr {
        position: relative;
        left: 65px;
        bottom: 2px;
    }
    .errrrr {
        position: relative;
        left: 55px;
        bottom: 2px;
    }
    .l {
        position: relative;
        top: 1000px;
        left: 245px;
        transform: all 5s;
    }
    .l :hover {
        transform: scale(1.1);
    }
    .san,
    .liu {
        border-left: 20px ;
    }
    .x,
    .c,
    .b,
    .n,
    .xx,
    .cc,
    .bb,
    .nn {
        border-left: 70px ;
    }
    .v,
    .b,
    .n,
    .zz,
    .xx,
    .cc,
    .vv,
    .bb,
    .nn {
        border-top: 70px ;
    }
    .ma {
        position: relative;
        top: 1050px;
        left: 650px;
    }
    .vx,
    .qq {
        transform: scale(1);
    }
    .qq {
        border-left: 20px ;
    }
    h4 {
        color: white;
        position: relative;
        left: 50px;
        bottom: 200px;
    }
    .mdw {
        position: absolute;
        bottom: 100px;
        left: 1000px;
        right: 200px;
        text-decoration: none;
    }
    .mdq {
        position: absolute;
        bottom: 100px;
        left: 1050px;
        right: 170px;
        text-decoration: none;
    }
    .mde {
        position: absolute;
        bottom: 100px;
        left: 1100px;
        right: 140px;
        text-decoration: none;
    }
    .MDC {
        position: absolute;
        bottom: 100px;
        left: 1150px;
        right: 110Px;
        text-decoration: none;
    }
    .zi P{
        font-size: 19px;
    }
   
        .you{
            /* width: 200px;
            height: 200px;
            border-radius: 50%; */
            /* margin: 100px auto; */
            overflow: hidden;
            border: 1px solid black;
            position: relative;
            left:   240px;
            top: 650px;
            border-radius: 120px;
        }
        
        .hahaha img {
            width: 220px;
            height: 200px;
            transition: all 1.5s;
        }
        
        .hahaha img:hover {
            box-shadow: 0 0 10px gray;
             transform: scale(1.5);
            transform: rotate(360deg);
        }
    
    </style>


    
    </head>
</head>

<body>

    <body>>

        
            <div class="hahaha" >
                <img class="you" src="8.jpg.jpg"  width="240px" height="240px">
            </div>
            <div class="me">
                <!-- <img class="yi" src="8.jpg.jpg" width="240px" height="240px"> -->
    
                <h2>Welcome to visit !</h2>
                <a class="mdw" href="#one">MYSELF</a>
                <a class="mdq" href="#two">HOBBY</a>
                <a class="mde" href="#three">CONTACT </a>
                <a class="MDC" href="#three">STYLE</a>
                <h4 id="one">关于我自己</h4>
                <p>我的名字是李鑫，我是一个积极健康向上的人，对生活的热情也是很高的；
                    
                    <br>这是一个简单的介绍
                    <br>我是巨蟹座
                    <br>喜欢打篮球，也很喜欢吃，会努力实现自己想拥有的东西，也对很多的新事物有着好奇心
                    <br>交个朋友吧QvQ
    
                </p>
            </div>
        
    
            <div class="r">
                <img class="wu" src="3.jpg.jpg" width="200px" height="200px">
                <img class="san" src="4.jpg.jpg" width="200px" height="200px">
            </div>
            <div class="q">
                <img class="wu" src="5.jpg.jpg" width="200px" height="200px">
                
            </div>
    
    
            <div>
                <img class="s" src="21.jpg" width="420px" height="420px">
            </div>
    
            <div class="zi">
                <h3 id="two">我的最爱-篮球</h3>
                <p>属于那种又菜还喜欢玩的，这个世bai界上，有喜欢看du篮球比赛，但不打zhi篮球的；有喜dao欢打蓝球，又zhuan喜欢看比赛的。我属于后shu者，篮球的魅力无论是在比赛中还是在观众席上都存在，但各有不同。篮球运动从产生到现在，已经改变了许多，以前没有扣篮，没有三分，没有各种富有变化的技术动作，没有背后传球，没有空中接力……但有一些东西却自始至终存在，那就是投篮和助攻。篮球的魅力根源于这两个方面，这是无论球员还是球迷都能感受得到的。在场上作战的球员，每当篮球从自己手中脱离，在空着划出一段优美的弧线，直入篮筐的时候，那种感觉异常的美妙，仿佛时间在那瞬间停止……而球迷在看到你投中一个球的时候，同样的会感到你的力量在空中蔓延，并仿佛让他们也充满了力量并感受到快乐。如果说自己投篮中的能让球员和球迷都享受到美好的感觉的话，那么当你为队友传出一个绝妙的好球，并由他完成最后一击的时候，所有人，包括球员的你和观看比赛的人都会感受到一种发自心里的快乐兴奋。
    
    
                </p>
            </div>
    
           
    
            <div class="l">
                <img class="z" src="9.JPG.jpg" width="500px" height="500px">
                <img class="x" src="10.JPG.jpg" width="500px" height="500px">
                <img class="c" src="11.JPG.jpg" width="500px" height="500px">
                <div>
                    <img class="v" src="12.JPG.jpg" width="500px" height="500px">
                    <img class="b" src="13.JPG.jpg" width="500px" height="500px">
                    <img class="n" src="14.JPG.jpg" width="500px" height="500px">
                </div>
                <div>
                    <img class="zz" src="15.JPG.jpg" width="500px" height="500px">
                    <img class="xx" src="16.JPG.jpg" width="500px" height="500px">
                    <img class="cc" src="17.JPG.jpg" width="500px" height="500px">
                </div>
                
    
            </div>
    
            <div class="ma">
                <h3 id="three">联系方式:</h3>
                <h5>QQ:1062962454</h5>
                <h5>微信：18380815468</h5>
                <h5>E-mail:1062962454@QQ.COM</h5>
                <img class="vx" src="18.jpg.jpg" width="200px" height="200px">
                <img class="qq" src="19.jpg.jpg" width="200px" height="200px">
            </div>
    
        </div>
        <div class="he"></div>
    
    
    
    
    
    </body>
    
</body>

</html>